<template>
  <div>
    <el-form ref="form" :model="form" :v-loading="loading" :rules="rules" label-width="100px">

      <el-row>
        <el-col :span="12">
          <el-form-item label="课程名称" prop="courseId">
            <el-select v-model="form.courseId" :disabled="form.id" clearable filterable placeholder="请选择课件名称">
              <el-option
                v-for="item in courseList"
                :key="item.id"
                :label="item.coursename"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="讲师" prop="lecturerId">
            <el-select v-model="form.lecturerId" clearable filterable placeholder="请选择讲师名称">
              <el-option
                v-for="item in lecturerList"
                :key="item.id"
                :label="item.nickname"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="课件名称" prop="optionname">
            <el-input v-model="form.optionname" placeholder="请输入课件名称"/>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="5">
          <el-form-item label="第几集" prop="number">
            <el-input-number v-model="form.number" :step="1" :max="500"></el-input-number>
          </el-form-item>
        </el-col>

        <el-col :span="5">
          <el-form-item label="播放次数" prop="playnumber">
            <el-input-number v-model="form.playnumber" :step="1" :max="999999"></el-input-number>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="5">
          <el-form-item label="是否免费" prop="free">
            <el-radio-group v-model="form.free" size="small">
              <el-radio label="0" border>是</el-radio>
              <el-radio label="1" border>否</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>

        <el-col :span="5">
          <el-form-item label="上/下架" prop="status">
            <el-radio-group v-model="form.status" size="small">
              <el-radio label="1" border>上架</el-radio>
              <el-radio label="0" border>下架</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>


      <el-row>
        <el-col :span="5">
          <el-form-item label="封面路径">
            <UploadFile ref="upload" @change="imageChange" :path="form.coursepath"></UploadFile>
          </el-form-item>
        </el-col>
      </el-row>

      <el-form-item label=" ">
        <el-button type="primary" :disabled="addLoading" @click.native.prevent="submitForm">
          <span v-if="!addLoading">提 交</span>
          <span v-else>提 交 中...</span>
        </el-button>
      </el-form-item>
    </el-form>


  </div>
</template>

<script>
  import UploadFile from '@/components/UploadFile';
  import {listCourse} from "@/api/college/course";
  import {listLecturer} from "@/api/college/lecturer";
  import {addOption, editOption} from "@/api/college/option";

  export default {
    components: {UploadFile},
    props: {
      row: {
        type: Object,
        require: false
      }
    },
    data() {
      return {
        uploadUrl: '',
        files: 1,
        disabled: false,
        loading: false,
        courseList: [],
        lecturerList: [],
        addLoading: false,
        flagFile: '',
        form: {
          courseId: undefined,
          lecturerId: undefined,
          optionname: undefined,
          number: 1,
          playnumber: 1,
          free: "0",
          coursepath: '',
          status: "1"
        },
        rules: {
          courseId: [
            {required: true, message: '请选择课程名称', trigger: 'blur'}
          ],
          lecturerId: [
            {required: true, message: '请选择讲师名称', trigger: 'blur'}
          ],
          optionname: [
            {required: true, message: '请输入课件名称', trigger: 'blur'},
            {min: 2, max: 20, message: '请输入2-28位字符', trigger: 'blur'}
          ]
        }
      }
    },
    created() {
      this.loading = true;
      this.getMap().then(res => {
        this.courseList = res[0].rows;
        this.lecturerList = res[1].rows;
        this.loading = false;
      });
      if (this.row) {
        this.form = {
          id: this.row.id,
          courseId: this.row.courseId,
          lecturerId: this.row.lecturerId,
          optionname: this.row.optionname,
          number: this.row.number,
          playnumber: this.row.playnumber,
          free: this.row.free + "",
          coursepath: this.row.coursepath,
          status: this.row.status + "",
        };
        this.flagFile = this.row.coursepath;
      }

      console.log(this.row);

    },
    methods: {
      async getMap() {
        return await Promise.all([listCourse(), listLecturer()]);
      },
      submitForm() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            if (this.flagFile && this.flagFile === this.form.coursepath) {
              this.imageChange(this.flagFile);
            } else {
              let children = this.$refs.upload;
              if (children.$refs.upload.uploadFiles.length === 0) {
                this.msgError('请上传文件');
              } else {
                children.$refs.upload.submit();
              }
            }
          }
        });
      },
      imageChange(message) {
        if (message === 'error') {
          this.msgError("附件上传失败,请重试或者联系管理员");
          return;
        }
        this.$set(this.form, 'coursepath', message);
        if (!message) {
          return;
        }
        this.addLoading = true;
        if (this.form.id) {
          editOption(this.form).then(response => {
            if (response.code === 200) {
              this.msgSuccess("编辑成功");
              this.$emit('goBack', 'editOption');
            }
          });
        } else {
          addOption(this.form).then(response => {
            if (response.code === 200) {
              this.msgSuccess("新增成功");
              this.$emit('goBack', 'addOption');
            }
          });
        }
      }
    }
  }
</script>

<style scoped>
  .el-select {
    width: 100%;
  }
</style>
